<%--
  Created by IntelliJ IDEA.
  User: SST
  Date: 2018/10/31
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="/commen/commen.jsp" />
    <%--<link href="${pageContext.request.contextPath}/static/hplus/css/bootstrap.min.css" rel="stylesheet">--%>
    <%--<link href="${pageContext.request.contextPath}/static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">--%>
    <%--<link href="${pageContext.request.contextPath}/static/hplus/css/font-awesome.min93e3.css" rel="stylesheet">--%>
    <%--<link href="${pageContext.request.contextPath}/static/hplus/css/animate.min.css" rel="stylesheet">--%>
    <%--<link href="${pageContext.request.contextPath}/static/hplus/css/style.min862f.css" rel="stylesheet">--%>

  <%--&lt;%&ndash;  <script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap/jquery-3.2.1.min.js"></script>--%>
    <%--<script type="text/javascript" src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>&ndash;%&gt;--%>
    <%--<script src="${pageContext.request.contextPath}/static/hplus/js/jquery.min.js"></script>--%>
    <%--<script src="${pageContext.request.contextPath}/static/hplus/js/bootstrap.min.js"></script>--%>
    <%--<script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>--%>
    <%--<script src="${pageContext.request.contextPath}/static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>--%>


    <script type="text/javascript">

        //得到查询的参数
        function queryParams (params) {

        };

        //数据校验



        $(function () {

            $('#fm').bootstrapValidator({
                message: '',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    membersname : {
                        message: '合作商名称不能为空！',
                        validators: {
                            notEmpty: {
                                message: '合作商名称不能为空！'
                            }
                        }
                    },
                    memberszh: {
                        message: '账号必须为8位！',
                        validators: {
                            notEmpty: {
                                message: '账号必须为8位！'
                            }
                        }
                    },
                    membersphone: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '电话不能为空！'
                            }
                        }
                    }
                }
            });



            $("#hytb").bootstrapTable({
                url:'${pageContext.request.contextPath}/gks/Search',
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,8,16],
                height:300,
                pageNumber:1,
                //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果 queryParamsType = 'limit' ,返回参数必须包含
                //limit, offset, search, sort, order 否则, 需要包含:
                //pageSize, pageNumber, searchText, sortName, sortOrder.
                // 返回false将会终止请求。
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        membersname:$("#membersname").val()
                    };
                    return temp;
                },

                columns:[
                    {
                        field:'membersid',
                        title:'合作商编号'
                    },
                    {
                        field:'membersname',
                        title:'合作商姓名'
                    },
                    {
                        field:'memberszh',
                        title:'合作商账号'
                    },
                    {
                        field:'membersphone',
                        title:'合作商电话'
                    },
                    {
                        field:'vip.vname',
                        title:'合作商等级',
                     /*   formatter:function(value,row,index){
                            if(row.membersdj==1){
                                return"普通会员";
                            }else if(row.membersdj==2){
                                return"黄金会员";
                            }else if(row.membersdj==3){
                                return"白金会员";
                            }


                        }*/
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return"<button class='btn tn-primary' onclick='javascript:del("+row.membersid+")' >删除</button>"+"&nbsp;&nbsp;&nbsp;&nbsp;"+
                                "<button class='btn tn-primary' onclick='javascript:ud("+row.membersid+")'>修改</button>"
                        }
                    }

                ]
            }) ;
        }) ;


        // function zj1(){
        //     $("#Div3").modal('show');
        // }



        function doadd(){
            var membersname=$("#Div3 [name=membersname]").val();
            var memberszh=$("#Div3 [name=memberszh]").val();
            var membersphone=$("#Div3 [name=membersphone]").val();
            var membersdj=$("#Div3 [name=hy]").val();

            $.post('${pageContext.request.contextPath}/Mem/inst',{"membersid":membersid,'membersname':membersname,'memberszh':memberszh,'membersphone':membersphone,'membersdj':membersdj},function(data){
               if(data>0){
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                   searcha();
                    $("#hytb").bootstrapTable("load",data);
                   $("#Div3").modal('hide');
                }
            });
        }



        function ud(membersids){
            membersid=membersids;
            //发送post请求
            $.post('${pageContext.request.contextPath}/Mem/getqueryId',{'membersid':membersid},function(data){
                $("#Div2").modal('show');
                //绑定事件
                $("#Div2").on('shown.bs.modal',function(e){
                    //给表单赋值
                    $("[name=membersname]").val(data.membersname);
                    $("[name=memberszh]").val(data.memberszh);
                    $("[name=membersphone]").val(data.membersphone)
                    $("[name=hy]").val(data.membersdj);

                })
            })


        };

        function doupd(){
            var membersname=$("#Div2 [name=membersname]").val();
            var memberszh=$("#Div2 [name=memberszh]").val();
            var membersphone=$("#Div2 [name=membersphone]").val();
            var membersdj=$("#Div2 [name=hy]").val();

            $.post('${pageContext.request.contextPath}/Mem/xg1',{"membersid":membersid,'membersname':membersname,'memberszh':memberszh,'membersphone':membersphone,'membersdj':membersdj},function(data){

                if(data>0){
                        searcha();
                        $("#hytb").bootstrapTable('load',data) ;
                    $("#Div2").modal('hide');

                };
            });

        }


        var membersid;
        function del(membersids){
            membersid=membersids;
            $("#Div1").modal('show');
        }

        function dodel(){
            var opts = $("#hytb").bootstrapTable("getOptions") ;
            //发送post请求
            $.post('${pageContext.request.contextPath}/Mem/delet',{membersid:membersid},function(data){

                if(data>0){


                    $("#Div1").modal('hide');
                    $("#hytb").bootstrapTable('load',data) ;
                    searcha();
                }else{
                    alert("删除失败");
                }


            });


        }


        function searcha() {
            var opts = $("#hytb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize;
            var offset = (opts.pageNumber-1) * limit;
            var membersname = $("#membersname").val() ;
            $.post('${pageContext.request.contextPath}/gks/Search',{'membersname':membersname,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#hytb").bootstrapTable('load',data) ;
            })
        }
    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">合作商列表</h3>
    </div>
    <div class="panel-body">
        <div class="row" style="margin-bottom: 10px">
            <form action="" class="form-inline">
                <div class="col-sm-4">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Div3">
                        <span class="glyphicon glyphicon-plus"></span>增加
                    </button>
                </div>

                <div class="col-sm-4 col-sm-offset-4 text-right">

                    <input id="membersname" type="text" class="form-control">
                    <input onclick="searcha()" type="button" class="btn btn-primary" value="查询">


                </div>
            </form>
        </div>
        <table id="hytb" class="table table-bordered"></table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="Div1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modelTitleId">提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-6" id="addrole" style="height: 100px">
                        <p>确认删除该合作商信息吗？</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="dodel()">删除</button>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="Div2">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改合作商信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" >
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商名称:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="membersname" class="form-control" id="title"  placeholder="请输入会员名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商账号:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="memberszh" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="会员账号">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商电话:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="membersphone" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="会员电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商级别</label>
                        <div class="col-sm-10">
                            <select  class="form-control" name="hy">
                                <option value="1">普通合作商</option>
                                <option value="2">黄金合作商</option>
                                <option value="3">白金合作商</option>
                            </select>

                        </div>
                    </div>




                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary"  onclick="doupd()" >修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


</div>




<%--增加模态框--%>

<div class="modal fade" id="Div3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">增加合作商信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="fm">
                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商名称:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="membersname" class="form-control" id="title1" placeholder="请输入合作商名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商账号:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="memberszh" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="合作商账号">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">合作商电话:</label>
                        <div class="col-sm-10">
                            <input  type="text" name="membersphone" class="form-control" &lt;%&ndash;id="title"&ndash;%&gt; placeholder="合作商电话">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="title" class="col-sm-2 control-label">等级级别</label>
                        <div class="col-sm-10">
                            <select  class="form-control" name="hy">
                                <option value="0">请选择</option>
                                <option value="1">普通合作商</option>
                                <option value="2">黄金合作商</option>
                                <option value="3">白金合作商</option>
                            </select>

                        </div>
                    </div>



                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary"  onclick="doadd()" >增加</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

